<template>
  <div class="boxmax">
    <div class="tope" :style="{ background: background }">{{ data }}</div>
    <el-carousel :interval="5000" arrow="never" :autoplay="false">
      <el-carousel-item v-for="(item, index) in img" :key="index">
        <div @click="chaka(item.imge)">
          <img :src="item.imge" class="imgq-1" />
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script lang="ts" setup>
import type { Image } from '@/types/consult'
defineProps<{
  data?: string
  background?: string
  img?: Image
}>()
const emit = defineEmits<{
  (e: 'dang', img?: string): void
}>()
const chaka = (img?: string) => {
  emit('dang', img)
}
</script>

<style lang="scss" scoped>
.boxmax {
  .imgq-1 {
    width: 100%;
    height: 230px;
  }
  width: 100%;
  /* background-color: red; */
  ::v-deep .el-carousel__container {
    height: 240px;
  }
  ::v-deep() .el-carousel__indicators [class*='indicator'] {
    background: #ffcc66;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
    background: #ffcc66;
    opacity: 0.4;
    margin: 0 5px;
  }
  ::v-deep() .el-carousel__indicators [class*='indicator']:hover,
  ::v-deep() .el-carousel__indicators [class*='indicator'].is-active {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: #ffcc66;
    transition: all 0.3s ease;
  }
  ::v-deep() .el-carousel__indicator--horizontal {
    padding: 0;
  }
  ::v-deep() .el-carousel__indicators--horizontal {
    padding: 1px 0;
    box-sizing: border-box;
  }
  ::v-deep() .el-carousel__button {
    width: 0px;
    height: 0px;
  }
  .tope {
    width: 100%;
    height: 40px;
    /* background: linear-gradient(180deg, #ff8080 0%, #992626 100%); */
    border-radius: 16px 16px 0px 0px;
    font-size: 16px;
    font-family:
      PingFangSC-Semibold,
      PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 40px;
    text-align: center;
  }
}

.el-carousel__item {
  /* background-color: #d3dce6; */
  height: 300px;
}
</style>
